import './IPBroadcast.scss'
import { useEffect, useState } from 'react'
import { Button, notification } from 'antd'
import { useMount, useRequest, useEventEmitter } from 'ahooks'

import { Http } from '../../../../Common/Api'
import { Video } from '../../../../Common/Configure/Video'

import { InitLionKing, DestructionKing } from '../Command/KING'
import { SDK_STATE, DEVICE_STATE, DEVICE_ALARM_STATE } from '../Command/KING'

import { microphoneMutilBoradcastStop, audioSpeakStop, videoMonitorStop } from '../Command/KING'
import { microphoneMutilBoradcastStart, audioSpeakStart, videoMonitorStart } from '../Command/KING'
import { useMemo } from 'react'

const { SOS } = window

const KINGTemplate = ({ video, type, serial, KING_ADMIN, Off }) => {
    const [api, contextHolder] = notification.useNotification()
    const [KINSKD, setKINSKD] = useState()

    const [TaskCode, setTaskCode] = useState()
    const [AudioCode, setAudioCode] = useState()
    const [VideoCode, setVideoCode] = useState()

    const [Loading, setLoading] = useState(true)
    const SDK_STATEEvent = useEventEmitter()
    SDK_STATEEvent.useSubscription(val => {
        if (val) {
            api.info({ key: 'king', message: 'KING初始化成功,正在建立连接...', placement: 'topLeft' })
            const data = { sdk: KINSKD, DeviceId: Number(serial), api, TaskCodeEvent }
            switch (type) {
                case 1:
                    microphoneMutilBoradcastStart(data)
                    break
                case 2:
                    audioSpeakStart(data)
                    break
                case 3:
                    videoMonitorStart(data)
                    break
                default:
                    break
            }
        } else {
            api.error({ key: 'king', message: '初始化失败,请检查音频输入设备', placement: 'topLeft' })
        }
    })

    const DEVICE_ALARM_STATEEvent = useEventEmitter()
    DEVICE_ALARM_STATEEvent.useSubscription()

    const TaskCodeEvent = useEventEmitter()
    TaskCodeEvent.useSubscription(val => {
        const { type, TaskCode } = val
        switch (type) {
            case 'kingMic':
                setTaskCode(TaskCode)
                break
            case 'kingAudio':
                setAudioCode(TaskCode)
                break
            case 'kingVideo':
                setVideoCode(TaskCode)
                audioSpeakStart({ sdk: KINSKD, DeviceId: Number(serial), api, TaskCodeEvent })
                break
            default:
                break
        }
        setLoading(false)
    })

    const CloseEvent = useEventEmitter()
    CloseEvent.useSubscription(val => {
        if (type === 3 && val === 'kingAudio') {
            videoMonitorStop(KINSKD, VideoCode, api, CloseEvent)
            Off()
        }
        Off()
    })

    const onStop = () => {
        switch (type) {
            case 1:
                microphoneMutilBoradcastStop(KINSKD, TaskCode, api, CloseEvent)
                break
            case 2:
                audioSpeakStop(KINSKD, AudioCode, api, CloseEvent)
                break
            case 3:
                audioSpeakStop(KINSKD, AudioCode, api, CloseEvent)
                break
            default:
                break
        }
    }
    useEffect(() => {
        if (KINSKD) {
            SDK_STATE(KINSKD, api, SDK_STATEEvent)
            DEVICE_STATE(KINSKD)
            DEVICE_ALARM_STATE(KINSKD, api, DEVICE_ALARM_STATEEvent)
        }
    }, [KINSKD, api, SDK_STATEEvent, DEVICE_ALARM_STATEEvent])

    useEffect(() => {
        const { Account, Password } = KING_ADMIN
        const sdk = new SOS.SDK({ Account, Password })
        InitLionKing(sdk, api)
        setKINSKD(sdk)
        return () => {
            DestructionKing(sdk)
        }
    }, [KING_ADMIN, api])

    return (
        <div className="KINGTemplate">
            {contextHolder}
            <audio id="html_audio_remote" autoPlay />
            <div className="KINGTemplate_Box">
                <div className="Video">
                    <div>
                        {' '}
                        <Video data={video} />{' '}
                    </div>
                    {type === 3 && (
                        <div>
                            {' '}
                            <video id="html_video_remote" autoPlay muted />{' '}
                        </div>
                    )}
                </div>
                <div className="Button">
                    <Button loading={Loading} type="primary" danger onClick={onStop}>
                        {Loading ? '连接中...' : '挂断'}
                    </Button>
                </div>
            </div>
        </div>
    )
}

export const IPBroadcastModal = ({ data, Off }) => {
    const { KING_ADMIN } = data
    const { ipBroadcastUuid } = data.data

    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res) })
    useMount(() => {
        runAsync({ url: 'getIPBroadcastUuid', path: [ipBroadcastUuid] })
    })

    const Template = useMemo(() => {
        if (Data) {
            const OtherList = { KING: KINGTemplate }
            return OtherList[Data.fullName]
        }
    }, [Data])

    if (Template) {
        return (
            <div className="IPBroadcastModal">
                <Template
                    video={data.data}
                    type={Data.broadcastType}
                    serial={Data.deviceSerial}
                    KING_ADMIN={KING_ADMIN}
                    Off={Off}
                />
            </div>
        )
    }
}
